<template>
    <div>
        <!-- <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>
                        <i class="el-icon-s-promotion"></i> 车辆配置
                    </el-breadcrumb-item>
                    <el-breadcrumb-item> 历史配置查询</el-breadcrumb-item>
                </el-breadcrumb>
            </div> -->
        <div class="content">
            <div class="strategyContent">
                <div style="margin-bottom: 10px">
                    查询列表
                </div>
                <TableComponent v-loading="isLoading" :assetList="historyConfigList" :tableColumns="historicalConfigurationTableColumns"
                                element-loading-text="加载中...">

                    <template #configInfoId="{row}">
                        <span v-if="row.configInfoType===0">T{{ row.configInfoId }}</span>
                        <span v-if="row.configInfoType===1">
							<span v-if="row.configInfoId.toString().length>3"> TG{{ row.configInfoId }}</span>
							<span v-if="row.configInfoId.toString().length===2"> TG0{{ row.configInfoId }}</span>
							<span v-if="row.configInfoId.toString().length===1"> TG00{{ row.configInfoId }}</span>
						</span>
                        <span v-else-if="!row.configInfoType&&row.configInfoType!==0">--</span>
                    </template>
                    <template #operationType="{row}">
                        <span v-if="row.operationType===0">新增</span>
                        <span v-if="row.operationType===1">回滚</span>
                    </template>

                    <template #operation="{ row }">
                        <el-button size="small" type="text" @click="viewDetailsFn(row)">查看详情</el-button>
                        <el-button :disabled="!row.canRollback||!btnPermission['HistoricalConfiguration-rollBackFn']" size="small" type="text"
                                   @click="rollBackFn(row)">回滚
                        </el-button>
                    </template>
                </TableComponent>

                <el-pagination :currentPage="historyConfigPageData.current" v-model:page-size="historyConfigPageData.size" :page-sizes="[10,20, 30, 40, 50]"
                               :total="historyConfigPageData.total"
                               background layout="total, sizes, prev, pager, next, jumper"
                               style="margin-top: 20px;float: right"
                               @size-change="handleSizeChange" @current-change="historyConfigPageChange">
                </el-pagination>
            </div>
        </div>
        <RollBackPopupComponent ref="rollBackPopupComponent" @feedbackFn="feedbackFn"/>
        <HistoryConfigDetail ref="historyConfigDetail"/>

    </div>

</template>

<script>
import TableComponent from '@/components/TableComponent.vue';

import {getHistoryConfigApi} from '@/api/carManage/policyManage.js';
import {historicalConfigurationTableColumns} from '@/constant/config.js';
import {computed, onMounted, reactive, ref} from 'vue';
import RollBackPopupComponent from './components/RollBackPopupComponent.vue';
import HistoryConfigDetail from './components/HistoryConfigDetail.vue';
import {useStore} from 'vuex';

export default {
    components: {
        HistoryConfigDetail,
        RollBackPopupComponent,
        TableComponent,
    },
    setup() {
        const historyConfigPageData = reactive({
            total: 0,
            current: 1,
            size: 10,
        });
        const isLoading = ref(false);
        const historyConfigList = ref([]);
        const store = useStore();
        const btnPermission = computed(() => store.state.btnPermission);
        const getHistoryConfigList = (size=10) => {
            getHistoryConfigApi({
                size: size,
                current: historyConfigPageData.current,
            }).then((res) => {
                if (res.data.code == 200) {
                    let response = res.data.data;
                    historyConfigList.value = response.records;
                    historyConfigPageData.total = response.total;
                    historyConfigPageData.current = response.current;
                }
            });
        };
        const handleSizeChange = (number) => {
            historyConfigPageData.size = number;
            getHistoryConfigList(number)
        }
        const historyConfigDetail = ref(null);
        const viewDetailsFn = (rowData) => {
            historyConfigDetail.value.switchVisible(rowData);
        };
        const rollBackPopupComponent = ref(null);
        const rollBackFn = (row) => {
            rollBackPopupComponent.value.switchVisible(row);
        };

        onMounted(() => {
            getHistoryConfigList();
        });
        const feedbackFn = () => {
            getHistoryConfigList();
        };

        const historyConfigPageChange = (val) => {
            historyConfigPageData.current = val;
            getHistoryConfigList(historyConfigPageData.size);
        };

        return {
            historicalConfigurationTableColumns,
            historyConfigList,
            isLoading,
            historyConfigPageData,
            getHistoryConfigList,
            viewDetailsFn,
            rollBackFn,
            rollBackPopupComponent,
            historyConfigPageChange,
            historyConfigDetail,
            feedbackFn,
            btnPermission,
            handleSizeChange
        };
    },
};
</script>


<style lang="less" scoped>
.crumbs {
}

.content {
    padding: 20px;

    .strategyContent {
        background: #ffffff;
        padding: 10px 20px;
    }

    .policyGroupContent {
        margin-top: 20px;
        background: #ffffff;
        padding: 10px 20px;
    }
}
</style>
